<template>
  <div>
    <el-cascader
      v-model="selectedTags"
      :options="cascaderOptions"
      :props="cascaderProps"
      placeholder="请选择标签"
      style="margin-top: 10px; width: 300px"
      clearable
      @change="onCascaderChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedTags: [],
      cascaderOptions: [],
      cascaderProps: {
        multiple: true,
        checkStrictly: false,
        value: "tagId",
        label: "content",
        children: "children",
      },
      mockTagData: [
        { content: "文本A", isChoose: "N", parentTag: "1", tagId: "1.1" },
        { content: "文本B", isChoose: "N", parentTag: "1", tagId: "1.2" },
        { content: "文本C", isChoose: "N", parentTag: "1.2", tagId: "1.2.1" },
        { content: "文本D", isChoose: "N", parentTag: "2", tagId: "2.1" },
        { content: "文本E", isChoose: "N", parentTag: "2.1", tagId: "2.1.1" },
        { content: "文本F", isChoose: "N", parentTag: null, tagId: "3" },
        { content: "文本G", isChoose: "N", parentTag: "3", tagId: "3.1" },
        { content: "文本H", isChoose: "N", parentTag: "3.1", tagId: "3.1.1" },
        { content: "文本I", isChoose: "N", parentTag: "4", tagId: "4.1" },
        { content: "文本J", isChoose: "N", parentTag: "4", tagId: "4.2" },
        { content: "文本K", isChoose: "N", parentTag: "4.2", tagId: "4.2.1" },
        { content: "111", isChoose: "N", parentTag: "5", tagId: "5.1" },
      ],
      zuizhongData: [
        {
          children: [
            {
              content: "文本C",
              isChoose: "N",
              parentTag: "1.2",
              tagId: "1.2.1",
            },
          ],
          content: "文本B",
          isChoose: "N",
          parentTag: "1",
          tagId: "1.2",
        },
        {
          children: [
            {
              content: "文本E",
              isChoose: "N",
              parentTag: "2.1",
              tagId: "2.1.1",
            },
          ],
          isChoose: "N",
          parentTag: "2",
          tagId: "2.1",
        },
        {
          children: [
            {
              content: "文本H",
              isChoose: "N",
              parentTag: "3.1",
              tagId: "3.1.1",
            },
          ],
          content: "文本G",
          isChoose: "N",
          parentTag: "3",
          tagId: "3.1",
        },
        {
          children: [
            {
              content: "文本K",
              isChoose: "N",
              parentTag: "4.2",
              tagId: "4.2.1",
            },
          ],
          content: "文本J",
          isChoose: "N",
          parentTag: "4",
          tagId: "4.2",
        },
      ],
    };
  },
  methods: {
    initCascaderData() {
      this.cascaderOptions = this.buildTreeData(this.mockTagData);
    },
    buildTreeData(data) {
      // 过滤掉parentTag为null的项
      const filteredData = data.filter((item) => item.parentTag !== null);

      // 获取所有可能的父节点（从filteredData和原数据中查找）
      const allData = data;
      const parentIds = [
        ...new Set(filteredData.map((item) => item.parentTag)),
      ];

      // 构建父节点映射
      const parentNodesMap = {};
      parentIds.forEach((parentId) => {
        const parentNode = allData.find((item) => item.tagId === parentId);
        if (parentNode) {
          parentNodesMap[parentId] = parentNode;
        }
      });

      // 识别一级节点（tagId中只有一个点的）
      const firstLevelItems = Object.values(parentNodesMap).filter((item) => {
        const dotCount = (item.tagId.match(/\./g) || []).length;
        return dotCount === 1;
      });

      // 构建树形结构
      const treeData = firstLevelItems.map((firstLevel) => {
        const children = filteredData.filter(
          (child) => child.parentTag === firstLevel.tagId
        );
        const result = Object.assign({}, firstLevel);
        if (children.length > 0) {
          result.children = children;
        }
        return result;
      });
      console.log(treeData, 83);

      return treeData;
    },
    onCascaderChange(value) {
      console.log("选中的标签:", value);
    },
  },

  created() {
    this.initCascaderData();
  },
};
</script>
<style scoped></style>
